<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
 xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" type="image/png" th:href="@{/static/image/icon.ico}"/>
  <link rel="stylesheet" th:href="@{../static/layui/css/layui.css}">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div th:include="common/menu.html"></div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<blockquote class="layui-elem-quote">
		角色管理
		</blockquote>
		<script type="text/html" id="addRole">
			<a class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle">添加</i></a>
		</script>
    	<table class="layui-hide" id="table_id" lay-filter="table_lay"></table>
    	<script type="text/html" id="switchTpl">
			<button type="button" class="layui-btn layui-btn-sm">关联用户</button>
		</script>
		<shiro:hasPermission name="sysRole:view">
    	<script type="text/html" id="barDemo">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		</shiro:hasPermission>
    </div>
  </div>
</div> 
<script src="../static/js/jquery-2.1.4.min.js"></script>
<script src="../static/layui/layui.js"></script>
<script src="../static/layui/lay/modules/table.js"></script>
<script>
layui.config({
    base : '../static/layui/'
}).extend({
    treetable : 'treetable-lay/treetable'
}).use(['table', 'layer','element'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var element = layui.element //元素操作
    var $ = layui.jquery;
    //渲染表格
     table.render({
         elem: '#table_id'
         ,height: 420
         ,url: '/user/sysRole/list.html' //数据接口
         ,title: '角色'
         ,toolbar: '#addRole' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
         ,cols: [ 
         	[
         		 {type: 'numbers', title: '编号'}
                 ,{field: 'roleName', title: '角色名称' }
                 ,{field: 'permission', title: '权限',  event: 'setPermission',sort: true,templet:'<div><font color=blue>【查看】</font></div>', totalRow: true}
                 ,{field: 'users', title: '用户群' }
                 ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
       		  ] 
         	],
       });
      //监听头工具栏事件
      table.on('toolbar', function(obj){
		editTable("");
	  });
      //监听行工具事件
      table.on('tool(table_lay)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
        ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'detail'){
          layer.msg('查看操作');
        } else if(layEvent === 'del'){
          layer.confirm('确定删除行么', function(index){
        	  //向服务端发送删除指令
        	  $.post("/user/sysRole/delete/{id}.html",{id:data.id},function(result){
         		 if(result.code==200){
         			 obj.del();
         		     layer.msg(result.message, {icon: result.icon});
         		 }else {
         			 layer.msg(result.message, {icon: result.icon});
         		 }
         	 })
          });
        } else if(layEvent === 'edit'){
        	editTable(data.id);
        }else if(layEvent === 'setPermission'){
          //弹出框权限
        	editTable(data.id);
        }else if(layEvent == 'selectUsers'){
        	//selectUsers(data.id);
        }else if(layEvent === 'add'){
        	editTable();
        }
      });
      
	function editTable(data){
		layer.open({
    	      type: 2,
    	      title: '',
    	      maxmin: true,
    	      shadeClose: true, //点击遮罩关闭层
    	      area : ['500px' , '600px'],
    	      content: '/user/sysRole/edit.html?id='+data  //加上选中行的ID值
    	 }); 
	}
	
});
</script>

</body>
</html>